import React from 'react';
import {
  Chart,
  Tooltip,
  Legend,
  Coordinate,
  Interval,
  Interaction,
  Axis,
  Guide,
  Coord,
  View,
  Geom,
} from 'bizcharts';
import DataSet from '@antv/data-set';

function Pie({ chartData }: { chartData: any[] }) {
  const { DataView } = DataSet;

  const userDv = new DataView();
  userDv.source(chartData).transform({
    type: 'percent',
    field: 'value',
    dimension: 'type',
    as: 'percent',
  });

  return (
    <Chart placeholder={false} height={'100%'} padding={50} autoFit>
      {/*<Legend visible={false} />*/}
      {/* 绘制图形 */}
      <View
        data={userDv.rows}
        scale={{
          percent: {
            formatter: (val) => {
              return (val * 100).toFixed(2) + '%';
            },
          },
        }}
      >
        <Coordinate type="theta" innerRadius={0.75} />
        <Interval
          position="percent"
          adjust="stack"
          color="type"
          label={['type', { offset: 40 }]}
        />
      </View>
    </Chart>
  );
}

export default Pie;
